<template>
    <div class="SignUp" style="width: 1440px; height: 1024px; position: relative; background: white">
        <div class="Frame22" style="width: 1000px; height: 1024px; left: 0px; top: 0px; position: absolute">
            <div class="Rectangle380"
                style="width: 1000px; height: 1024px; left: 0px; top: 0px; position: absolute; background: #FAF9F7"></div>
            <div class="Group250" style="width: 527px; height: 764px; left: 236px; top: 69px; position: absolute">
                <div class="Rectangle93"
                    style="width: 527px; height: 743px; left: 0px; top: 21px; position: absolute; background: #FAF9F7; border-radius: 8px">
                </div>
                <div class="SayHi"
                    style="width: 395px; height: 95px; left: 66px; top: 0px; position: absolute; text-align: center; color: #25282B; font-size: 32px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 0.10px; word-wrap: break-word">
                    创 建 您 的 账 号</div>
                <div class="Group218" style="width: 446px; height: 59px; left: 40px; top: 133px; position: absolute">
                    <div class="InputText"
                        style="width: 281px; height: 24px; left: 25px; top: 25px; position: absolute; color: #52575C; font-size: 16px; font-family: Montserrat; font-weight: 400; line-height: 24px; letter-spacing: 0.10px; word-wrap: break-word">
                        |</div>
                    <div class="InputText"
                        style="width: 281px; height: 14px; left: 25px; top: 0px; position: absolute; color: #52575C; font-size: 11px; font-family: Montserrat; font-weight: 400; line-height: 14px; letter-spacing: 0.20px; word-wrap: break-word">
                        输入邮箱</div>
                    <div class="Line13"
                        style="width: 446px; height: 0px; left: 0px; top: 59px; position: absolute; border: 3px #119C59 solid">
                    </div>
                </div>
                <div class="Group219" style="width: 446px; height: 34px; left: 40px; top: 241px; position: absolute">
                    <div class="InputText"
                        style="width: 281px; height: 24px; left: 25px; top: 0px; position: absolute; color: #52575C; font-size: 16px; font-family: Montserrat; font-weight: 400; line-height: 18px; letter-spacing: 0.20px; word-wrap: break-word">
                        输入密码</div>
                    <div class="Line13"
                        style="width: 446px; height: 0px; left: 0px; top: 34px; position: absolute; background: #52575C; border: 3px #A0A4A8 solid">
                    </div>
                </div>
                <div class="Group227" style="width: 24px; height: 24px; left: 423px; top: 483px; position: absolute">
                    <div class="IconOutlinedDirectionsChevronDown"
                        style="width: 24px; height: 24px; left: 0px; top: 0px; position: absolute"></div>
                </div>
                <div class="Group220" style="width: 228.48px; height: 30px; left: 40px; top: 328px; position: absolute">
                    <div class="InputText"
                        style="width: 143.95px; height: 14px; left: 25px; top: 0px; position: absolute; color: #52575C; font-size: 16px; font-family: Montserrat; font-weight: 400; line-height: 14px; letter-spacing: 0.20px; word-wrap: break-word">
                        姓</div>
                    <div class="Line13"
                        style="width: 228.48px; height: 0px; left: 0px; top: 30px; position: absolute; background: #52575C; border: 3px #A0A4A8 solid">
                    </div>
                </div>
                <div class="Group221" style="width: 209.61px; height: 28px; left: 276.39px; top: 330px; position: absolute">
                    <div class="InputText"
                        style="width: 132.06px; height: 14px; left: 25.61px; top: 0px; position: absolute; color: #52575C; font-size: 16px; font-family: Montserrat; font-weight: 400; line-height: 14px; letter-spacing: 0.20px; word-wrap: break-word">
                        名</div>
                    <div class="Line13"
                        style="width: 209.61px; height: 0px; left: 0px; top: 28px; position: absolute; background: #52575C; border: 3px #A0A4A8 solid">
                    </div>
                </div>
                <div class="Group224" style="height: 34px; left: 191.42px; top: 407px; position: absolute">
                    <div class="InputText"
                        style="width: 90.20px; height: 24px; left: 26.58px; top: 0px; position: absolute; text-align: right; color: #52575C; font-size: 16px; font-family: Montserrat; font-weight: 400; line-height: 24px; letter-spacing: 0.10px; word-wrap: break-word">
                        日</div>
                    <div class="Line13"
                        style="width: 143.16px; height: 0px; left: 0px; top: 34px; position: absolute; background: #52575C; border: 3px #A0A4A8 solid">
                    </div>
                </div>
                <div class="Group225" style="width: 159px; height: 59px; left: 40px; top: 382px; position: absolute">
                    <div class="InputText"
                        style="width: 90.20px; height: 24px; left: 34px; top: 25px; position: absolute; text-align: right; color: #52575C; font-size: 16px; font-family: Montserrat; font-weight: 400; line-height: 24px; letter-spacing: 0.10px; word-wrap: break-word">
                        月</div>
                    <div class="InputText"
                        style="width: 133px; height: 14px; left: 26px; top: 0px; position: absolute; color: #52575C; font-size: 11px; font-family: Montserrat; font-weight: 400; line-height: 14px; letter-spacing: 0.20px; word-wrap: break-word">
                        生日</div>
                    <div class="Line13"
                        style="width: 143.16px; height: 0px; left: 0px; top: 59px; position: absolute; background: #52575C; border: 3px #A0A4A8 solid">
                    </div>
                </div>
                <div class="Group226" style="height: 34px; left: 342.84px; top: 407px; position: absolute">
                    <div class="InputText"
                        style="width: 90.20px; height: 24px; left: 26.16px; top: 0px; position: absolute; text-align: right; color: #52575C; font-size: 16px; font-family: Montserrat; font-weight: 400; line-height: 24px; letter-spacing: 0.10px; word-wrap: break-word">
                        年</div>
                    <div class="Line13"
                        style="width: 143.16px; height: 0px; left: 0px; top: 34px; position: absolute; background: #52575C; border: 3px #A0A4A8 solid">
                    </div>
                </div>
                <div class="BtnFilled"
                    style="width: 446px; height: 58px; left: 40px; top: 548px; position: absolute; justify-content: center; align-items: center; display: inline-flex">
                    <div class="BtnFilled"
                        style="width: 446px; height: 58px; position: relative; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
                        <div class="Rectangle62"
                            style="width: 446px; height: 58px; background: #E8E8E8; border-radius: 36px"></div>
                        <div
                            style="text-align: center; color: #A0A4A8; font-size: 24px; font-family: Montserrat; font-weight: 600; line-height: 18px; letter-spacing: 0.20px; word-wrap: break-word">
                            注 册</div>
                    </div>
                </div>
                <div class="ByClickingCreateAccountIAgreeThatIHaveReadAndAcceptedTheTermsOfUseAndPrivacyPolicy"
                    style="width: 338px; height: 53px; left: 59px; top: 615px; position: absolute"><span
                        style="color: black; font-size: 12px; font-family: Montserrat; font-weight: 500; line-height: 16px; letter-spacing: 0.20px; word-wrap: break-word">By
                        clicking Create account, I agree that I have read and accepted the </span><span
                        style="color: #119C59; font-size: 12px; font-family: Montserrat; font-weight: 500; line-height: 16px; letter-spacing: 0.20px; word-wrap: break-word">Terms
                        of Use</span><span
                        style="color: black; font-size: 12px; font-family: Montserrat; font-weight: 500; line-height: 16px; letter-spacing: 0.20px; word-wrap: break-word">
                        and </span><span
                        style="color: #119C59; font-size: 12px; font-family: Montserrat; font-weight: 500; line-height: 16px; letter-spacing: 0.20px; word-wrap: break-word">Privacy
                        Policy</span><span
                        style="color: black; font-size: 12px; font-family: Montserrat; font-weight: 500; line-height: 16px; letter-spacing: 0.20px; word-wrap: break-word">.
                        <br />
                        <br /></span></div>
            <div class="OrUseAccount"
                style="width: 446px; height: 18px; left: 39px; top: 656px; position: absolute; text-align: center; color: #25282B; font-size: 14px; font-family: Montserrat; font-weight: 600; line-height: 18px; letter-spacing: 0.20px; word-wrap: break-word">
                or use account</div>
        </div>
        <div class="BtnFilledIcon"
            style="width: 446px; height: 58px; left: 275px; top: 825px; position: absolute; justify-content: center; align-items: center; display: inline-flex">
            <div class="BtnFilled"
                style="width: 446px; height: 58px; position: relative; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
                <div class="Rectangle62" style="width: 446px; height: 58px; background: #119C59; border-radius: 36px">
                </div>
                <div class="Group534" style="width: 92px; height: 26px; position: relative">
                    <div
                        style="left: 63px; top: 6px; position: absolute; text-align: center; color: #FAF9F7; font-size: 14px; font-family: Montserrat; font-weight: 700; line-height: 18px; letter-spacing: 0.20px; word-wrap: break-word">
                        微信</div>
                    <div class="Facebook11"
                        style="width: 26px; height: 26px; left: 0px; top: 0px; position: absolute; justify-content: center; align-items: center; display: inline-flex">
                        <img class="Rectangle402" style="width: 26px; height: 26px; mix-blend-mode: difference"
                            src="https://via.placeholder.com/26x26" />
                    </div>
                </div>
            </div>
        </div>
        <div class="BtnFilledIcon"
            style="width: 446px; height: 58px; left: 275px; top: 899px; position: absolute; justify-content: center; align-items: center; display: inline-flex">
            <div class="BtnFilled"
                style="width: 446px; height: 58px; position: relative; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
                <div class="Rectangle62" style="width: 446px; height: 58px; background: #25282B; border-radius: 36px">
                </div>
                <div class="Group535" style="position: relative">
                    <div class="Google"
                        style="left: 44px; top: 6px; position: absolute; text-align: center; color: #FAF9F7; font-size: 14px; font-family: Montserrat; font-weight: 700; line-height: 18px; letter-spacing: 0.20px; word-wrap: break-word">
                        GOOGLE</div>
                    <div class="Search1"
                        style="width: 29px; height: 29px; left: 0px; top: 0px; position: absolute; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                        <div class="Vector" style="width: 22.13px; height: 11.70px; background: #F14336"></div>
                        <div class="Vector" style="width: 6.43px; height: 13.54px; background: #FBBB00"></div>
                        <div class="Vector" style="width: 14.18px; height: 14.02px; background: #518EF8"></div>
                        <div class="Vector" style="width: 21.85px; height: 11.47px; background: #28B446"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Group534" style="width: 446px; height: 58px; left: 275px; top: 751px; position: absolute">
            <div class="Rectangle62"
                style="width: 446px; height: 58px; left: 0px; top: 0px; position: absolute; background: #4099FF; border-radius: 36px">
            </div>
            <div class="Qq"
                style="left: 232px; top: 22px; position: absolute; text-align: center; color: #FAF9F7; font-size: 14px; font-family: Montserrat; font-weight: 700; line-height: 18px; letter-spacing: 0.20px; word-wrap: break-word">
                QQ</div>
            <div class="Twitter1"
                style="width: 26px; height: 26px; left: 168px; top: 16px; position: absolute; justify-content: center; align-items: center; display: inline-flex">
                <img class="Rectangle403" style="width: 26px; height: 26px" src="https://via.placeholder.com/26x26" />
            </div>
        </div>
    </div>
    <div class="Group993" style="width: 212px; height: 32px; left: 53px; top: 41px; position: absolute">
        <div class="Newsletter"
            style="left: 0px; top: 2px; position: absolute; text-align: center; color: #119C59; font-size: 25px; font-family: Montserrat; font-weight: 700; text-transform: uppercase; letter-spacing: 0.20px; word-wrap: break-word">
            Newsletter</div>
        <div class="App"
            style="left: 183px; top: 0px; position: absolute; text-align: center; color: #333333; font-size: 14px; font-family: Montserrat; font-weight: 700; letter-spacing: 0.20px; word-wrap: break-word">
            App</div>
    </div>
    <div class="Frame21" style="width: 440px; height: 1024px; left: 1000px; top: 0px; position: absolute">
        <div class="Rectangle94"
            style="width: 440px; height: 1024px; left: 0px; top: 0px; position: absolute; background: #119C59"></div>
        <div class="Frame20" style="width: 274px; height: 238px; left: 83px; top: 393px; position: absolute">
            <div class="BtnFilled" style="width: 200px; height: 58px; left: 37px; top: 167px; position: absolute">
                <div class="Rectangle62"
                    style="width: 200px; height: 58px; left: 0px; top: 0px; position: absolute; border-radius: 36px; border: 2px #FAF9F7 solid">
                </div>
                <div
                    style="width: 122px; height: 18px; left: 39px; top: 20px; position: absolute; text-align: center; color: #FAF9F7; font-size: 24px; font-family: Montserrat; font-weight: 600; line-height: 18px; letter-spacing: 0.20px; word-wrap: break-word">
                    登 录</div>
            </div>
            <div
                style="left: 42px; top: 0px; position: absolute; text-align: center; color: #FAF9F7; font-size: 32px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 0.10px; word-wrap: break-word">
                已 有 账 号？</div>
            <div
                style="width: 274px; height: 65px; left: 0px; top: 54px; position: absolute; text-align: center; color: #FAF9F7; font-size: 18px; font-family: Montserrat; font-weight: 500; line-height: 24px; letter-spacing: 0.20px; word-wrap: break-word">
                读者可免登录并查看新闻</div>
        </div>
    </div>
</div>
</template>